<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'account.label', default: 'account')}"/>
    <title>分级渲染</title>
    <style>
    %{--设置点击侧边栏如果大于当前屏幕高度则地图会变形--}%
    #wrapper{
        min-height: 0!important;
    }
    </style>
    <!-- map -->
    <asset:javascript src="newMap/libs/ol/ol.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <asset:javascript src="newMap/libs/ol/xdmap.js" type="text/javascript" />
    <g:link href="../../assets/javascripts/newMap/libs/ol/map.css" rel="stylesheet" type="text/css" />
    <!--libs-->
    <asset:javascript src="newMap/libs/gradRender/chroma.min.js" type="text/javascript"/>
    <asset:javascript src="newMap/libs/gradRender/geostats.js" type="text/javascript"/>
   <!--init-->
    <asset:javascript src="newMap/gradRender.js"/>
    <asset:stylesheet href="newMap/gradRender.css"/>
</head>
<body class="fixed-navbar fixed-sidebar">
%{--<g:include view="map/Mapscript.gsp"/>--}%
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>地图</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                分级渲染
            </h2>
        </div>
    </div>
</div>
<div  id="allmap" style="position: absolute;">
    <div id='EpidemicProbabilityMap'>
        <div>
            <select id="methodselector" class="form-control">
                <option value="method_EI" >等间距</option>
                <option value="method_Q" selected>分位数</option>
                <option value="method_SD" >标准差</option>
                <option value="method_AP" >等差数</option>
                <option value="method_GP" >Geometric Progression</option>
                <option value="method_CJ">Class Jenks</option>
            </select>
        </div>
        <br>
        <div>
            <span>分层级别:</span><span><input  type="number" id="classcount" min="1" value="5" max="10"></span>
            <div id='legend'></div>
        </div>
    </div>
</div>
</div>
<g:javascript>
    var map = xdmap.mapInit('allmap',10,[13377091.446132127, 3533836.6916802684]);
    gradRender.init('3301');
    // setTimeout(function () {
    //     gradRender.reset('4401');
    // },5000)
</g:javascript>
</body>
</html>
